<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<canvas id="myCanvas" width="1200" height="600" style="border: 1px solid;">
			
		</canvas>
		<script type="text/javascript">
			//获取画布
			var canvas = document.getElementById("myCanvas");
			//创建画笔
			var ctx = canvas.getContext("2d");
			var arcArr = [
				[20, 100, 20, 15, 0, "darksalmon"],
				[20, 100, 20, 9, 0, "mediumspringgreen"],
				[20, 100, 20, 6, 5, "powderblue"],
			]
			
			setInterval(function() {
				arcArr.push([20, 100, 10, 2, 5, "palegoldenrod"]);
				arcArr.push([20, 100, 10, 3, 5, "palegreen"]);
				arcArr.push([20, 100, 10, 4, 5, "paleturquoise"]);
				arcArr.push([20, 100, 10, 5, 5, "palevioletred"]);
				arcArr.push([20, 100, 10, 6, 5, "papayawhip"]);
				arcArr.push([20, 100, 10, 5, 6, "peachpuff"]);
				arcArr.push([20, 100, 10, 2, 3, "plum"]);
				arcArr.push([20, 100, 10, 2, 2, "powderblue"]);
				arcArr.push([20, 100, 10, 6, 8, "mediumpurple"]);
				arcArr.push([20, 100, 10, 6, 8, "purple"]);
				arcArr.push([20, 100, 10, 6, 8, "lightpink"]);
				arcArr.push([20, 100, 10, 6, 8, "darksalmon"]);
				arcArr.push([20, 100, 10, 6, 8, "lightcoral"]);
				arcArr.push([20, 100, 10, 6, 8, "lightgreen"]);
				arcArr.push([20, 100, 10, 6, 8, "lightskyblue"]);
				
			}, 1000);
			setInterval(function() {
				ctx.fillStyle = "rgba(255,220,178,0.7)";
				ctx.fillRect(0, 0, 1200, 600);

				for(var i = 0; i < arcArr.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = arcArr[i][5];
					//ctx.fillStyle = "palegreen";
					//var arcX  =  arcArr[i][0];
					//var arcY =  arcArr[i][1];
					//var arcR  =  arcArr[i][2];
					//var arcVX  =  arcArr[i][3];
					//var arcVy =  arcArr[i][4];

					ctx.arc(arcArr[i][0], arcArr[i][1], arcArr[i][2], 0, 2 * Math.PI);
					ctx.fill();
					arcArr[i][0] = arcArr[i][0] + arcArr[i][3];
					arcArr[i][1] = arcArr[i][1] + arcArr[i][4];
					arcArr[i][4] = arcArr[i][4] + 0.5;
					if(arcArr[i][1] > 600 - arcArr[i][2]) {
						arcArr[i][4] = -arcArr[i][4];
						arcArr[i][4] = arcArr[i][4] * 0.8;
						arcArr[i][1]=600-arcArr[i][2];
					}
					if(arcArr[i][0] > 1200 - arcArr[i][2]) {
						arcArr[i][3] = -arcArr[i][3];
						arcArr[i][0] = 1200 - arcArr[i][2];
					}
					if(arcArr[i][0] < arcArr[i][2]) {
						arcArr[i][3] = -arcArr[i][3];
						arcArr[i][0] = arcArr[i][2];
					}
                  

				}
			}, 16)
		</script>
	</body>

</html>